<template>
	<view class="trading">
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<!--  tab-->
		<searchHead goback='gobackF' background="#EE515A" title='交易' searchTip='searchimg'></searchHead>
		<view class='dynamicBox bgff'>
			<view class="dynamicTab center">
				<view @click="tonavigateTo('/pages/trading/buy')" :class="tabIndex == 0?'active':''" class="tabItem flex-f1 tx-c">买入</view>
				<view @click="tonavigateTo('/pages/trading/sell')" :class="tabIndex == 1?'active':''" class="tabItem flex-f1  tx-c">卖出</view>
			</view>
		</view>
		<view style="height: 20rpx;background-color: #F2F2F2;width: 100vw;"></view>
		<view class="tradingContainer">
			<view class="plr15">
				<view class="search start">
					<image src="/static/imgs/mi_slices/mi_slices.png" mode=""></image>
					<input class="flex-f1" v-model="value" type="text" @input="onInputSell" placeholder="请输入股票或代码查询" border-color="red"
					 :border="true" />
				</view>
			</view>
			<!-- 原来的股票名称 -->
			<view class="plr15" style="margin-top: 8upx; color: #F4F4F5;display: none;">
				<input v-model="shares.N" type="text" style="color: #F4F5F6;" placeholder="股票名称" :disabled="true" border-color="red" :border="true" />
			</view>
		</view>
		<view class="padding-lr bg_12161F">
			<!-- 重写的股票名称 -->
			<view class="flex justify-between align-center padding-tb border-bottom-1B202C">
				<view class="text-black text-df">股票名称</view>
				<view class="flex justify-end align-center text-xl text-black" style="text-align: right;">
					<text style="">{{shares.N}}</text>
				</view>
			</view>
			<view class="flex justify-between align-center padding-tb border-bottom-1B202C">
				<view class="text-black text-df">最新价格</view>
				<view class="flex justify-end align-center text-df color_EE4343">
					<view class="margin-right-sm" v-if="flag == 1">{{shares.P}}</view>
					<view class="margin-right-sm" v-if="flag == 1">
						<text style="color: red;" v-if="shares.P>=shares.YC">{{(shares.P-shares.YC).toFixed(2)}}</text>
						<text style="color: #3ca509;" v-if="shares.P<shares.YC">{{(shares.P-shares.YC).toFixed(2)}}</text>
					</view>
					<view class="" v-if="flag == 1">
						<text style="color: red;" v-if="shares.P>=shares.YC">{{((shares.P-shares.YC) *10/shares.YC *10).toFixed(2)}}%</text>
						<text style="color: #3ca509;" v-if="shares.P<shares.YC">{{((shares.P-shares.YC) *10/shares.YC *10).toFixed(2)}}%</text>
					</view>
				</view>
			</view>
			<view class="flex justify-between align-center padding-tb border-bottom-1B202C">
				<view class="text-black text-df">卖出股数</view>
				<view class="flex justify-end align-center text-xl text-black">
					<yp-number-box style="color: #000000;" :value="buyNum" @change="change()" :min="100" :max="100000000" :step="100"></yp-number-box>
				</view>
			</view>
			<view class="flex justify-between align-center padding-tb border-bottom-1B202C">
				<view class="text-black text-df">卖出份额</view>
				<view class="start">
					<view @click="fourPointSell()" class="btn1 mr8 text-black" :class="btnIndex == 0?'active':''">1/4</view>
					<view @click="twoPointSell()" class="btn1 mr8 text-black" :class="btnIndex == 1?'active':''">1/2</view>
					<view @click="allSell()" class="btn1 text-black" :class="btnIndex == 2?'active':''">全仓
					</view>
				</view>
			</view>
			<view class="flex justify-between align-center padding-tb">
				<view class="text-black text-df">持仓</view>
				<view class="flex justify-end align-center text-df color_99A2B5">{{flag == 1?sellOrder.balance:''}}股</view>
			</view>
		</view>
		<view class="padding-lr-xl padding-top-lg flex flex-direction">
			<button class="cu-btn lg" @click.stop="sell()" style="margin-bottom: 24rpx;background-color: #EE515A;color: #FFFFFF;">席位卖出</button>
		</view>
		<view style="height: 12rpx;background-color: #F2F2F2;width: 100vw;"></view>
		<!-- 新版本 end -->
		<!-- 数量 -->
		<view class="myBox" style="margin-top: 30upx;">
			<view class="start myTitel" style="background-color: #FFFFFF; color: #E23232;border-bottom: 1px solid #F2F2F2;">
				<view class="my flex-f1" style="font-size: 28rpx;">我的持仓</view>
			</view>
			<view class="tableTh start" style="background-color: #FFFFFF; color: #999999;">
				<text class='flex-f1 tx-c'>名称/代码</text>
				<text class='flex-f1 tx-c'>股数</text>
				<text class='flex-f1 tx-c'>成本/现价</text>
				<text class='flex-f1 tx-c'>盈亏</text>
			</view>
			<view class="tableItem bb start" style="color: #F4F5F6;" v-for="(item, index) in order" :key="index" @click="show(index)">
				<view class='flex-f1 tx-c'>
					<view class="name">{{item.sname}}</view>
					<view class="num">{{item.scode}}</view>
				</view>
				<view class='flex-f1 tx-c'>
					<view class="name2">{{item.balance}}</view>
				</view>
				<view class='flex-f1 tx-c'>
					<view class="name2 c-red">{{item.smoney}}</view>
					<view class="num">{{item.data.P}}</view>
				</view>
				<view class='flex-f1 tx-c'>
					<view style="color: red;" v-if="item.profitAndLoss>=0">{{(item.profitAndLoss).toFixed(2)}}</view>
					<view style="color: #3ca509;" v-if="item.profitAndLoss<0">{{(item.profitAndLoss).toFixed(2)}}</view>
				</view>
				<u-tr v-if="index == indexButton">
					<td width="100%">
						<u-button style="width: 160upx;height: 60upx;" type="error" @click="showModel(item)">卖出</u-button>
					</td>
				</u-tr>
				<u-modal ref="uModal" v-model="showHide" title="卖出数量" :show-cancel-button="true" @confirm="confirm" @cancel="modelHide">
					<u-row class="top">
						<u-col span="2"></u-col>
						<u-col span="8">
							<u-form-item>
								<u-input placeholder="请输入卖出数量" v-model="modelValue" />
							</u-form-item>
						</u-col>
					</u-row>
				</u-modal>
				<view style="margin-top: 10px;">
					<u-line color="#e5e5e5" />
				</view>
			</view>
		</view>

		<view>
			<u-toast ref="uToast" />
		</view>

	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	import step from "@/component/step.vue"
	export default {
		components: {
			searchHead,
			step
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				tabIndex: 1,
				btnIndex: '',
				// 新增
				order: [],
				indexButton: '-1', //初始状态不显示
				// 卖出
				value: '',
				shares: {},
				buyNum: 100,
				flag: 0,
				myOrder: [],
				buyId: '',
				sellOrder: {},
				sellOrderType: 1,
				modelValue: 0, //model
				showHide: false, //显示隐藏
			};
		},
		methods: {
			// 跳转页面
			tonavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 新增内容
			// 获取持仓
			getOrders() {
				this.$Request.post(this.$api.index.getOrders).then(res => {
					this.order = res.data;
					this.data = res;
				})
			},
			// 获取当前股票的订单
			getOrder() {
				this.$Request.post(this.$api.index.getOrder, {
					code: this.code,
				}).then(res => {
					this.myOrder = res.data;
				})
			},
			// 随时更新用户信息
			getUser: function() {
				this.$Request.post(this.$api.index.getUser).then(res => {
					this.user = res.data;
				})
			},
			// 展示操作
			show(index) {
				if (index == this.indexButton) {
					this.indexButton = -1;
				} else {
					this.indexButton = index;
				}
			},
			// 卖出
			showSell(item) {
				this.value = item.scode;
				this.$Request.post(this.$api.index.searchSharesSell, {
					where: this.value,
				}).then(res => {
					if (res.data) {
						this.shares = res.data;
						this.flag = 1;
						this.sellOrder = res.order;
						this.$Request.post(this.$api.index.getOrderSell, {
							code: this.sellOrder.scode,
						}).then(res => {
							this.myOrder = res.data;
							this.sellOrderType = this.myOrder[0].insurance;
						})
					} else {
						this.$refs.uToast.show({
							title: '未查到您持有该股票',
						})
						this.shares = {};
						this.flag = 0;
						this.myOrder = {};
					}
				})
			},
			onInputSell(e) {
				if (!e) {
					this.shares = {};
					this.flag = 0;
					this.sellOrder = {};
					return;
				}
				this.$Request.post(this.$api.index.searchSharesSell, {
					where: e.detail.value,
				}).then(res => {
					if (res.data) {
						this.shares = res.data;
						this.flag = 1;
						this.sellOrder = res.order;
						this.$Request.post(this.$api.index.getOrderSell, {
							code: this.sellOrder.scode,
						}).then(res => {
							this.myOrder = res.data;
							this.sellOrderType = this.myOrder[0].insurance;
							console.log(res.data, '----------------->')
						})
					} else {
						this.$refs.uToast.show({
							title: '未查到您持有该股票',
						})
						this.shares = {};
						this.flag = 0;
						this.myOrder = {};
					}

				})
			},
			onSearchSell() {
				this.$Request.post(this.$api.index.searchSharesSell, {
					where: this.value,
				}).then(res => {
					if (res.data) {
						this.shares = res.data;
						this.flag = 1;
						this.sellOrder = res.order;
						this.$Request.post(this.$api.index.getOrderSell, {
							code: this.sellOrder.scode,
						}).then(res => {
							this.myOrder = res.data;
							this.sellOrderType = this.myOrder[0].insurance;
							console.log(res.data, '----------------->')
						})
					} else {
						this.$refs.uToast.show({
							title: '未查到您持有该股票',
						})
						this.shares = {};
						this.flag = 0;
						this.myOrder = {};
					}

				})
			},
			allSell() {
				this.btnIndex = 2
				this.buyNum = parseInt(this.myOrder[0].balance / 100) * 100;

				if (this.buyNum < 100) {
					this.$refs.uToast.show({
						title: '最少卖出100股',
					})
					return;
				}
			},
			twoPointSell() {
				this.btnIndex = 1
				this.buyNum = parseInt(this.myOrder[0].balance / 2 / 100) * 100;
				if (this.buyNum < 100) {
					this.$refs.uToast.show({
						title: '最少卖出100股',
					})
					return;
				}
			},
			threePointSell() {
				this.buyNum = parseInt(this.myOrder[0].balance / 3 / 100) * 100;
				if (this.buyNum < 100) {
					this.$refs.uToast.show({
						title: '最少卖出100股',
					})
					return;
				}
			},
			fourPointSell() {
				this.btnIndex = 0
				this.buyNum = parseInt(this.myOrder[0].balance / 4 / 100) * 100;
				if (this.buyNum < 100) {
					this.$refs.uToast.show({
						title: '最少卖出100股',
					})
					return;
				}
			},
			showModel(item) {
				this.modelValue = item.balance;
				this.showHide = true;
				this.sellOrder = item;
			},
			//隐藏model
			modelHide() {
				this.showHide = false
			},
			// 确定
			confirm() {
				if (this.modelValue > this.sellOrder.balance) {
					this.$refs.uToast.show({
						title: '确认信息：卖出数大于了持仓数！',
					})
					return;
				}
				this.$Request.post(this.$api.index.sell, {
					buyid: this.sellOrder.id,
					snum: this.modelValue,
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
					})
					if (res.code == 0) {
						this.shares = {};
						this.flag = 0;
						this.sellOrder = {};
						this.getUser();
						this.getOrders();
						this.showHide = false
					}
				})
			},

			sell(type) {
				if (!this.sellOrder.id) {
					this.$refs.uToast.show({
						title: '请选择股票！',
					})
					return;
				}
				if (this.buyNum > this.sellOrder.balance) {
					this.$refs.uToast.show({
						title: 'sell 卖出数大于了持仓数！',
					})
					return;
				}
				// if(type == 'insurance'){
				// 	this.popup.sell_show = true;
				// 	console.log(this.myOrder)
				// 	return;
				// }
				let that = this;
				uni.showLoading({
					title: '正在抢筹卖出中......',
					mask: true
				})

				setTimeout(() => {
					let request_url = that.$api.index.sell;

					// if(type == 'insurance_url'){
					// 	//保险购买接口
					// 	request_url = that.$api.index.sellInsurance;
					// }

					that.$Request.post(request_url, {
						buyid: that.sellOrder.id,
						snum: that.buyNum,
					}).then(res => {
						setTimeout(() => {
							uni.hideLoading();
							that.$refs.uToast.show({
								title: res.msg,
							})
							if (res.code == 0) {
								that.shares = {};
								that.flag = 0;
								that.sellOrder = {};
								that.myOrder = [];
								that.getUser();
								that.getOrders();
							}
						}, 3000);
					})
				}, 5000);

			},
			// getSellByUser() {
			// 	this.$Request.post(this.$api.index.getSellByUser).then(res => {
			// 		this.sellData = res.data;
			// 	})
			// },
			checkLogin() {
				this.$Request.get(this.$api.index.checkLogin).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/public/login/login",
						})
					} else if (res.code == 0) {
						this.$Request.get(this.$api.index.userInfo).then(res => {
							if (res.data.ischeck == 1) {
								uni.showModal({
									content: "实名认证，机构正在审核中",
									confirmText: "确定",
									cancelText: "取消"
								})
							} else if (res.data.ischeck == 0) {
								var ischeck = res.data.ischeck;
								uni.showModal({
									content: "温馨提示：根据反洗钱规定，您需要完成实名认证才可以继续操作。",
									confirmText: "去认证",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/member/realname?flag=" + ischeck,
											})
										} else if (res.cancel) {

										}
									}
								})
							} else if (res.data.ischeck == 3) {
								var ischeck = res.data.ischeck;
								uni.showModal({
									content: "实名认证未通过审核，请重新提交",
									confirmText: "确定",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/member/realname?flag=" + ischeck,
											})
										} else if (res.cancel) {

										}
									}
								})
							}
						})
					}
				})
			},
			// transdetails(item) {
			// 	uni.navigateTo({
			// 		url: "/pages/index/transdetails?id=" + item.id,
			// 	})
			// },
			// insurance_billie(){
			// 	this.$Request.post(this.$api.index.insurance_billie).then(res => {
			// 		res.data.fee = Number(res.data.fee)
			// 		res.data.insurance = Number(res.data.insurance)
			// 		res.data.shares = Number(res.data.shares)
			// 		this.insurance = res.data
			// 	})
			// },
			// is_insurance_agree(){
			// 	this.$Request.get(this.$api.index.insurance).then(res => {
			// 		if(res.code == 0){
			// 			let data = res.data;
			// 			if(data.agree == 2){ //未同意
			// 				uni.showToast({
			// 					title: '请先同意保险购买协议',
			// 					icon:'none',
			// 					success() {
			// 						setTimeout(function(){
			// 							uni.navigateTo({
			// 								url: '/pages/new_page/agreement',
			// 							})
			// 						},500)
			// 					}
			// 				});
			// 			}else{
			// 				this.buyShares('insurance_url');
			// 			}
			// 		}

			// 	})
			// }
		},
		onShow() {
			this.checkLogin();
			this.getUser();
			this.getOrders();
			//this.getSellByUser();
			//this.insurance_billie();
			//this.current = 1
			let _self = this;
			let that = this;
			uni.$on('change', function(data) {
				that.buyNum = parseInt(data / 100) * 100;
			})
			this.timer = setInterval(function() {
				_self.getOrders();
				_self.getUser();
			}, 10000);
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		onLoad(e) {
			if (e.code) {
				this.value = e.code
				this.onSearchSell()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./buyAndSell.scss";
	.my{
		position: relative;
		&::before{
			position: absolute;
			width: 69rpx;
			height: 6rpx;
			border-radius: 3rpx;
			background-color: #E23232;
			content: "";
			bottom: -16rpx;
			left: 20rpx;
		}
	}
</style>
